<template>
	<xn-form-container title="补卡记录" :width="700" :visible="visible" :destroy-on-close="true" @close="onClose">
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
		>
		</s-table>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="sysPunchRecordForm">
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import sysReplacementListApi from '@/api/biz/sysReplacementListApi'
	// 抽屉状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	const table = ref()
	const parameter = ref({})
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const columns = [
		{
			title: '姓名',
			dataIndex: 'name'
		},
		{
			title: '补卡时间',
			dataIndex: 'replenishmentTime'
		},
		{
			title: '异常状态',
			dataIndex: 'abnormalState'
		},
		{
			title: '补卡事由',
			dataIndex: 'reason'
		}
	]

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			let recordData = cloneDeep(record)
			parameter.value = {
				userId: recordData.account,
				replenishmentTime: recordData.checkinTime
			}
		}
	}
	const loadData = () => {
		return sysReplacementListApi.sysReplacementListPage(parameter.value).then((data) => {
			return data
		})
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
